<template>
  <div class="modal " ref="modal" v-show="show">
    <div class="flex-cent f-pa">
      <div class="modal-content f-bclos " :class="animation?'bounceIn':'bounceOut'">
        <div class="modal-header flex-cent">
          <slot name="header">
            <p class="title">{{modal.title}}</p>
          </slot>
          <div class="modal-close " @touchstart.stop="close(0)">&times;</div>
        </div>
        <div class="modal-body f-iScroll f-bavg " ref="modalBody" id="">
          <slot name="body"></slot>
        </div>
        <div class="modal-footer flex-cent">
          <div class="modal-btn">
            <div class="btn btn-default" @touchstart.stop="close(1)">取消</div>
            <div class="btn btn-submit" @touchstart.stop="submit()">确定</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import IScroll from 'iscroll'
export default {
  name: "modalLig",
  props: ["modalInfo"],
  mounted() {
    this.$nextTick(function() {
      this.modIscroll = new IScroll(this.$refs.modalBody);
    });
  },
  updated() {
    this.$nextTick(function() {
      this.modIscroll.refresh();

      this.showDaterangepicker();
    });
  },
  computed: {
    /**
     * 格式化props进来的参数,对参数赋予默认值
     */
    modal: {
      get() {
        let modal = this.modalInfo;

        if (modal) {
          modal = {
            title: modal.title || "提示"
          };
        } else {
          modal = {
            title: "提示"
          };
        }

        return modal;
      }
    }
  },
  data() {
    return {
      show: false, // 是否显示模态框
      animation: true, //动画效果
      resolve: "",
      reject: "",
      promise: "" // 保存promise对象
    };
  },
  methods: {
    //第三方 时间控件 初始化 （自定义 时间）
    showDaterangepicker() {
      this.daterangepicker = $(this.$parent.$refs.dateTime).daterangepicker(
        {
          opens: "center",
          timePicker: true,
          timePicker24Hour: true,

          locale: {
            format: "YYYY-MM-DD HH:mm",
            separator: " ~ ",
            applyLabel: "确定",
            cancelLabel: "取消",
            fromLabel: "起始时间",
            toLabel: "结束时间",
            customRangeLabel: "自定义",
            daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
            monthNames: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月"
            ],
            firstDay: 1
          }
        },
        function(start, end, label) {
          console.log(
            "New date range selected: " +
              start.format(this.locale.format) +
              " to " +
              end.format(this.locale.format) +
              " (predefined range: " +
              label +
              ")"
          );
        }
      );
    },
    /**
     * 确定,将promise断定为完成态
     */
    submit() {
      this.animation = false;
      setTimeout(() => {
        this.show = false;
      }, 800);
      this.resolve("submit");
    },
    /**
     * 关闭,将promise断定为reject状态
     * @param type {number} 关闭的方式 0表示关闭按钮关闭,1表示取消按钮关闭
     */
    close(type) {
      this.animation = false;
      setTimeout(() => {
        this.show = false;
      }, 800);
      this.reject(type);
    },
    /**
     * 显示confirm弹出,并创建promise对象
     * @returns {Promise}
     */
    confirm() {
      this.show = true;
      this.animation = true;
      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
      return this.promise; //返回promise对象,给父级组件调用
    }
  }
};
</script>
<style scoped>
.bounceIn {
  animation: bounceIn 0.8s 0.1s ease both;
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.bounceOut {
  animation: bounceOut 0.8s 0.2s ease both;
}
@keyframes bounceOut {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}
</style>


